<style>
  .main-nav { display: none; }
</style>

<!-- TOPBAR S -->
<header class="top-bar flex-row">
  <span class="row-item row-item-auto top-bar-back" onclick="window.history.back()">返回</span>
  <h3 class="row-item top-bar-name">新增收货地址</h3>
  <span class="row-item row-item-auto top-bar-menu"></span>
</header>
<!-- TOPBAR E -->

<div class="form">
  <form method="post" action="saveDeliverAddressPost" id="form" class="pd10">
    <div class="form-item clearfix">
      <label>收货人</label>
      <div>
        <input type="text" name="name" placeholder="请输入收货人姓名" value="{$deliverAddress.name}">
      </div>
    </div>
    <div class="form-item clearfix">
      <label>手机号码</label>
      <div>
        <input type="tel" name="tel" placeholder="填写正确手机号码" value="{$deliverAddress.tel}">
      </div>
    </div>
    <div class="form-item clearfix">
      <label>省份</label>
      <div>
        <select name="province" id="province">{$deliverAddress.provinceOptions}</select>
      </div>
    </div>
    <div class="form-item clearfix">
      <label>城市</label>
      <div>
        <select name="city" id="city">{$deliverAddress.cityOptions}</select>
      </div>
    </div>
    <div class="form-item clearfix">
      <label>地区</label>
      <div>
        <select name="area" id="area">{$deliverAddress.areaOptions}</select>
      </div>
    </div>
    <div class="form-item clearfix">
      <label>详细地址</label>
      <div>
        <textarea name="address">{$deliverAddress.address}</textarea>
      </div>
    </div>
    
    <div class="form-item submit">
     <input type="hidden" name="id" value="{$deliverAddress.id}">
     <button type="submit" class="btn btn-theme">保存收货地址</button>
    </div>
  </form>
 </div>
 
 <script type="text/javascript">
   (function(){
     var oProvince = document.getElementById( "province" ),
         oCity = document.getElementById( "city" ),
         oArea = document.getElementById( "area" ),
         sid = {$sid};

     oProvince.addEventListener( "change", getCity, false );
     oCity.addEventListener( "change", getArea, false );

     function getCity() {
       var p = this.value;
       GH.ajax( "__CONTROLLER__/getCityPost", {code: p, sid: sid}, function(data){
         oCity.innerHTML = data;
       }, "post" );
     };
     function getArea() {
       var c = this.value;
       GH.ajax( "__CONTROLLER__/getAreaPost", {code: c, sid: sid}, function(data){
         oArea.innerHTML = data;
       }, "post" );
     };
     
     var form = document.getElementById ( "form" ),
         formInput = form.getElementsByTagName ( "input" ),
         formSelect = form.getElementsByTagName ( "select" );
       
     form.onsubmit = function(){
       if ( check() ) {
         var data = GH.serialize( "form" );
         data.sid = {$sid};
         GH.ajax ( "__CONTROLLER__/saveDeliverAddressPost", data, function(data){
           GH.showMessage( data.msg );
           if (data.error == 0 ) {
             window.location = document.referrer;
           }
         }, "post" );
       }
       return false;
     }
     
     function isAllFill( item, index ) {
       if( item.getAttribute( "type" ) == "hidden" ) { return true }
       return item.value.trim() !== "";
     };

     //检查表单
     function check() {

        var check = false;
        var inputAllFill = [].every.call(formInput, isAllFill);
        var selectAllFill = [].every.call(formSelect, isAllFill);
        if ( !inputAllFill ) {
          GH.showMessage("请填写完整信息");
        } else if ( !selectAllFill ) {
          GH.showMessage("请选择收货地址");
        } else {
          check = true;
        };
        return check;
     };
     
   })()
 </script>